
import {h,init} from 'snabbdom'
import eventlisteners from 'snabbdom/modules/eventlisteners'
import style from 'snabbdom/modules/style'
let path = init([
    eventlisteners,
    style
])



let app = document.querySelector('#app')



let data = [{
        id:1,
        name:'One',
        value:'123456789456123'
    },{
        id:2,
        name:'Two',
        value:'85208520852096'
    },{
        id:3,
        name:'Three',
        value:'74185456963'
}]


function all(data){
   var da =  data.map(value =>{
        return h('li',[
            h('span',{style:{padding:'10px'}},value.id),
            h('span',{style:{margin:'10px'}},value.name),
            h('span',{style:{margin:'10px'}},value.value)
        ])
    })
   return h('div',{
    style:{
        width:'800px',
        height:'800px',
        margin:'0 auto',
        background:'yellow'
    }},[
        h('Button#add',{
            on: {
              click: addli
            },
            style:{
                right:'0px',
            }
          }, 'add'),
          h('Button#remove',{
            on: {
              click: removeli
            }
          }, 'remove'),
          h('Button#sort',{
            on: {
                click: sortli
            }
          }, 'sort'),
          h('ul',{style:{　'list-style-type': 'none'}},da)
    ])
}
let vnode = all(data)
let oldVnode = path(app,vnode)
function sortli(){
    let alldata = data.sort((v1,v2) =>{
        return Math.random()-0.5;
    })
    let newNode = all(alldata)
    path(oldVnode,newNode)
}
function addli(){
    
    data.push({
        id:4,
        name:'Four',
        value:'324567543245678'
    })
    let d = new Set(data)
    let newNode = all(data)
    path(oldVnode,newNode)
}

function removeli(){
     data.pop()

    let newNode = all(data)
    path(oldVnode,newNode)
}